<template>
  <div class="progress-wrap"
       ref="progress"
       @click="handleClick">
    <div class="progress-bar"
         :style="{width}"></div>
    <div class="btn"
         @touchstart="handleTouchStart"
         @touchmove="handleTouchMove"
         @touchend="handleTouchEnd"
         :style="{left}"
         ref="btn">
      <div class="icon-wrap">
        <svg class="icon"
             aria-hidden="true">
          <use xlink:href="#icon-jine1"></use>
        </svg>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'progressBar',
  data () {
    return {
      width: '100%',
      touchStart: false,
      left: '97%',
      percentage: '99'
    }
  },
  methods: {
    handleTouchStart () {
      this.touchStart = true
    },
    handleTouchMove (e) {
      if (this.touchStart) {
        const width = e.touches[0].clientX
        this.setWidth(width)
      }
    },
    handleTouchEnd () {
      this.touchStart = false
    },
    handleClick (e) {
      const width = e.clientX
      this.setWidth(width)
    },
    // 设置宽度
    setWidth (width) {
      const initWidth = this.$refs.progress.clientWidth
      const btnWidth = this.$refs.btn.clientWidth
      const left = this.$refs.progress.offsetLeft
      if (width > initWidth) {
        this.width = initWidth + 'px'
        this.left = initWidth - (btnWidth / 1.2) + 'px'
      } else if (width <= left) {
        this.width = 0
        this.left = 0
      } else {
        this.width = width + 'px'
        this.left = width - (btnWidth / 1.2) + 'px'
      }
      this.percentage = Math.round(parseInt(this.width) / initWidth * 100)
    }
  },
  watch: {
    percentage (per) {
      this.$emit('changeMoney', per)
    }
  },
  mounted () {
    const initWidth = this.$refs.progress.clientWidth
    const btnWidth = this.$refs.btn.clientWidth
    this.left = initWidth - (btnWidth / 1.2) + 'px'
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/mixins.styl'
@import '~stylus/variable.styl'

.progress-wrap
  width 100%
  height 16px
  border-radius 8px
  background-color rgba(255, 255, 255, 0.3)
  position relative

  .progress-bar
    height 100%
    background-color $common_bgc
    border-radius 8px
    transition all 0.3s

  .btn
    position absolute
    width 46px
    height 46px
    background $common_bgc
    border-radius 50%
    top 50%
    transform translateY(-50%)
    transform-origin center
    transition all 0.3s
    line-height 46px
    text-align center

    .icon-wrap
      width 40px
      height 40px
      position absolute
      top 50%
      left 50%
      border-radius 50%
      transform-origin center
      transform translate(-50%, -50%)

      .icon
        width 100%
        height 100%
        position absolute
        top 50%
        left 50%
        border-radius 50%
        transform-origin center
        transform translate(-50%, -50%)
</style>
